* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  overflow: hidden;
}
body {
  background-color: #655643;
}
.container {
  display: grid;
  width: 90%;
  margin: 80px auto;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  position: relative;
}
.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  display: block;
}
.pointer {
  position: absolute;
  /* 线条的粗细 */
  --t: 3px;
  /* 线条的长度 */
  --l: 30px;
  /* 线条与图片的间隔 */
  --g: 15px;
  /* 图片的尺寸 */
  --s: 100px;
  /* 框框的坐标 */
  --x: 0px;
  --y: 0px;

  left: 0;
  top: 0;
  width: calc(var(--s) + 2 * var(--g));
  height: calc(var(--s) + 2 * var(--g));
  border: var(--t) solid #fff;
  margin-left: calc(var(--g) * -1);
  margin-top: calc(var(--g) * -1);
  transform: translate(var(--x), var(--y));
  transition: 0.5s;

  /* 角 */
  /* -webkit-mask: conic-gradient(
      at var(--l) var(--l),
      transparent 75%,
      blue 75% 100%
    )
    0 0 / calc(100% - var(--l)) calc(100% - var(--l)) repeat; */
  background: conic-gradient(
      at var(--l) var(--l),
      red 75%,
      blue 75% 100%
    )
    0 0 / calc(100% - var(--l)) calc(100% - var(--l)) no-repeat;
}
